<template>
  <!-- 单个线路详情页面 -->
  <div class="station_route">

    <Routeheader @changeCarNum="changeCarNum" @changeRoute="changeRoute" class="station_route_header"
      :isDetailRoute="true" :routeAllData="routeAllData" />

    <div class="station_route_main">
      <div v-for="(item, index) in routeDatas" :key="`key${index}`">
        <CarStationLine :routeData="item" :isPlateNo="isPlateNo" :index="index" @showCarDialog="showCarDialog"
          @closeDilog="hideDialog" :isDetailRoute="true" @showRightmen="showRightmen" @showRightmen1="showRightmen1" />
      </div>
      <detailTable :routeId="route.query.routeId" :startAndEndStation="startAndEndStation" />
    </div>

    <component :is="CarNodeDialog" v-if="dialog_isShow" :x="dialog_x" :y="dialog_y" :dialog_data="dialog_data"
      v-click-outside="hideDialog" @closeDilog="hideDialog" />


    <!-- 右键菜单弹框 -->
    <div class="rightMenu" ref="rightMenu" v-show="rightmenu_show"
      :style="{ 'left': rightmenu.x-160 + 'px', 'top': rightmenu.y - 90 + 'px' }">

      <!-- 有车标重复的时 移入显示车牌列表 -->
      <div v-if="isReplay" style="display: flex;">
        <div class="borderItem">
          <div class="functionItem" v-for="item in rightmenu_data.repeatList" @mouseenter="handleEnter(item)"
            @contextmenu="handelRightMenu($event, item)" @mouseleave="dialog_isShow = false">{{ item.plateNo }}</div>
        </div>
      </div>

      <!-- 功能列表 -->
      <div v-if="isShowFunctionList" class="borderItem">
        <div>{{ routeName }} （{{ activeVehicleId }}）</div>
        <div v-for="item in functionList" :key="item.btn" class="functionItem" @click="handelClick(item)"
          @mouseenter="showDispatchSet(item)">
          <span v-show="item.show">{{ item.btn }}</span>
        </div>
      </div>

      <div v-if="isShowDispatchStatus" class="borderItem">
        <div v-for="item in dispatchList" :key="item.btn" class="functionItem" @click="handelClick1(item)">
          <span v-show="operationalType == item.value">√</span>
          {{ item.btn }}
        </div>
      </div>

    </div>

  </div>

  <!-- 二次弹窗组件  :dialog_data="props.dialog_data" -->
  <div class="window" v-show="isShow">
    <component :is="activeComponent" class="content" @closeWindow="closeWindow" :roueterData="activeRouterData"
      :routeName="routeName">
    </component>
  </div>
</template>

<script setup>
import Routeheader from '../components/Routeheader.vue'
import CarStationLine from '../components/CarStationLine/CarStationLine.vue'
import CarNodeDialog from '../components/CarStationLine/customNodeVue/Dialog.vue'
import detailTable from './components/detailTable.vue'
import { ClickOutside as vClickOutside } from 'element-plus'
import { res, MergeRes } from '@/mock/routeMock.js'
import { getRouteInfo } from '@/api/dispatch/routeLine.js'
import { computed, handleError, onActivated, onMounted, watch } from 'vue'
// import DispatchSet from '.././components/CarStationLine/customNodeVue/components/dispatchSet'
import VideoMonitor from '.././components/CarStationLine/customNodeVue/components/videoMonitor'
import TracjReplay from '.././components/CarStationLine/customNodeVue/components/trackReplay'
import Checkline from '.././components/CarStationLine/customNodeVue/components/checkline'
import ExchangePosition from '.././components/CarStationLine/customNodeVue/components/exchangePosition'
import ExchangeTrip from '.././components/CarStationLine/customNodeVue/components/exchangeTrip'
import SendNote from '.././components/CarStationLine/customNodeVue/components/sendNote'
import ElectronicList from '.././components/CarStationLine/customNodeVue/components/electronicList'
import ChangeSendTime from '.././components/CarStationLine/customNodeVue/components/changeSendTime'
import { changeOperation } from '@/api/dispatch/routeLine'


const { proxy } = getCurrentInstance();
const route = useRoute()
const routeAllData = ref()
const routeName = ref()
routeAllData.value = JSON.parse(route.query.routeAllData)
routeName.value = route.query.routeName

const startAndEndStation = ref([])
const routeDatas = ref([])
const routeInfo = async (routeId = '') => {
  let params = { routeId: routeId }
  let ret = await getRouteInfo(params)
  startAndEndStation.value.push(ret.data.stationList[0])
  startAndEndStation.value.push(ret.data.stationList.pop())
  routeDatas.value = [ret.data]
}

// 右键菜单弹出位置
const rightmenu_show = ref(false)
let rightmenu_show_x = ref(200)
let rightmenu_show_y = ref(100)
const rightmenu_data = ref({})
const isReplay = ref(false)
function showRightmen(e, value) {
  rightmenu_show.value = true
  isReplay.value = value  
  rightmenu_show_x.value = e.e.clientX
  rightmenu_show_y.value = e.e.clientY
  rightmenu_data.value = e.node.data
  functionList.value[functionList.value.length - 1].show = false 
  isShowFunctionList.value=!value
}
function showRightmen1(x, y,item) {
  rightmenu_show.value = true
  isShowFunctionList.value = true
  rightmenu_show_x.value = x
  rightmenu_show_y.value = y
  functionList.value[functionList.value.length - 1].show = true
  activeVehicleId.value = item.vehicleId
  operationalType.value = item.operationalType
}
document.onclick = () => {
  rightmenu_show.value = false
}
const rightmenu = computed(() => {
  return {
    x: rightmenu_show_x.value,
    y: rightmenu_show_y.value,
  }
})
onMounted(() => {
  routeInfo(route.query.routeId)
})

// 车辆弹出层位置信息
const dialog_isShow = ref(false)
const dialog_x = ref(111)
const dialog_y = ref(111)
const dialog_data = ref(null)
const showCarDialog = (e, value) => {
  if (!dialog_isShow.value) {
    dialog_isShow.value = value
    dialog_data.value = e.node.data
    dialog_x.value = e.e.clientX
    dialog_y.value = e.e.clientY
  }
}
const hideDialog = (e) => {
  dialog_isShow.value = false
}
window.addEventListener('scroll', function () {
  dialog_isShow.value = false
});
const isPlateNo = ref(false)
const changeCarNum = (boolean) => {
  isPlateNo.value = boolean
}
const changeRoute = () => {
}
function handleEnter(item) {
  dialog_isShow.value = true
  dialog_data.value = item
}



//功能列表
const functionList = ref([
  {
    btn: '调度设置 >',
    // compontent: DispatchSet,
    show: true
  },
  {
    btn: '视频监控',
    compontent: VideoMonitor,
    show: true
  },
  {
    btn: '轨迹回放',
    compontent: TracjReplay,
    show: true
  },
  {
    btn: '切换线路',
    compontent: Checkline,
    show: true
  },
  {
    btn: '部位替换',
    compontent: ExchangePosition,
    show: true
  },
  {
    btn: '趟次替换',
    compontent: ExchangeTrip,
    show: true
  },
  {
    btn: '短信下发',
    compontent: SendNote,
    show: true
  },
  {
    btn: '电子路单',
    compontent: ElectronicList,
    show: true
  },
  { //此项必须放列表最后
    btn: '发车时间修改',
    compontent: ChangeSendTime,
    show: false
  }
])
//点击功能列表项 切换到对应组件
const isShowFunctionList = ref(false)
const activeVehicleId = ref({})
const operationalType = ref()
const activeRouterData = ref({})
function handelRightMenu(e, item) {
  e.preventDefault()
  e.target.style.backgroundColor = '#9BAFD6'
  e.target.style.color = '#1c2f61'
  isShowFunctionList.value = true  //展示功能模块
  activeRouterData.value = item
  activeVehicleId.value = item.vehicleId
  operationalType.value = item.operationalType
}

const activeComponent = ref()
const isShow = ref(false)
function closeWindow(e) {
  isShow.value = false
}
function handelClick(item) {
  if (item.btn == ' 调度设置 >') {
    isShow.value = false
  } else {
    isShow.value = true
    activeComponent.value = item.compontent
    rightmenu_show.value = false
  }
}

//调度状态处理
const isShowDispatchStatus = ref(false)
const dispatchList = ref([
  { btn: "运营", value: 0 },
  { btn: "保养", value: 1 },
  { btn: "加油/汽", value: 2 },
  { btn: "包车", value: 3 },
  { btn: "故障修车", value: 4 },
  { btn: "事故", value: 5 },
  { btn: "其他", value: 6 },
])

function showDispatchSet(item) {
  if (item.btn === '调度设置 >') {
    isShowDispatchStatus.value = true
  } else {
    isShowDispatchStatus.value = false
  }
}

function handelClick1(item) {
  changeOperation({ vehicleId: activeVehicleId.value, operationType: item.value }).then(
    res => {
      if (res.code === 200) {
        isShow.value = false
        proxy.$modal.msgSuccess(res.msg)
        operationalType.value = item.value
      } else {
        msgError(res.msg)
      }
    }
  )
}



</script>

<style lang="scss" scoped>
.station_route {
  width: 100%;
  height: 100%;
  background-color: #1c2f61;

  .station_route_header {
    width: 100%;
  }

  .rightMenu {
    // display: inline-block;
    display: flex;
    background-color: #1c2f61;
    color: #9BAFD6;
    border-radius: 6px;
    // border: 1px solid #9BAFD6;
    position: absolute;
    left: 0;
    top: 0;

    .functionItem {
      text-align: center;
      padding: 6px;
      border-bottom: 1px solid #2e4980;
      cursor: pointer;
      font-size: 14px;

      &:hover {
        background-color: #9BAFD6;
        color: #1c2f61
      }
    }

    .borderItem {
      background-color: #1c2f61;
      color: #9BAFD6;
      border-radius: 6px;
      border: 1px solid #9BAFD6;
    }
  }
}

.station_route_main {
  padding: 18px 30px;
}

:deep(.el-input__wrapper) {
  background-color: #1c2f61;
}

.window {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;

  .content {
    // width: 860px;
    min-width: 500px;
    padding: 20px;
    background-color: #091940;
    border: 1px solid #9BAFD6;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    opacity: 0.95;
    color: #9BAFD6;
  }
}
</style>